import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

class ListViewRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _ListViewRouteState();
}

class _ListViewRouteState extends State<ListViewRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListViewTestRoute'),
      ),
      body: ListView(
        shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: <Widget>[
          const Text('这种创建ListView的方法只适用少部分的Widgets因为里面的Widget要提前创建好'),
          const Text('I\'m dedicating every day to you'),
          const Text('Domestic life was never quite my style'),
          const Text('When you smile, you knock me out, I fall apart'),
          const Text('And I thought I was so smart'),
          RaisedButton(
            color: Colors.blue,
            highlightColor: Colors.blue[700],
            colorBrightness: Brightness.dark,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: Text('ListView.uilder'),
            onPressed: () {
              Navigator.push(
                context,
                new MaterialPageRoute(
                  builder: (context) {
                    return new ListViewBuilderRoute();
                  },
                ),
              );
            },
          ),
          RaisedButton(
            color: Colors.blue,
            highlightColor: Colors.blue[700],
            colorBrightness: Brightness.dark,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: Text('ListView.separated'),
            onPressed: () {
              Navigator.push(
                context,
                new MaterialPageRoute(
                  builder: (context) {
                    return new ListViewSeparatedRoute();
                  },
                ),
              );
            },
          ),
          RaisedButton(
            color: Colors.blue,
            highlightColor: Colors.blue[700],
            colorBrightness: Brightness.dark,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
            ),
            child: Text('实例：列表加载'),
            onPressed: () {
              Navigator.push(
                context,
                new MaterialPageRoute(
                  builder: (context) {
                    return new InfiniteListView();
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

//通过ListView.builder建立比较多的项目
class ListViewBuilderRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ListViewBuilderRouteState();
}

class _ListViewBuilderRouteState extends State<ListViewBuilderRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView.builder'),
      ),
      body: ListView.builder(itemBuilder: (context, int index) {
        return ListTile(
          title: Text('$index'),
        );
      }),
    );
  }
}

//ListView.separated可以生成列表项之间的分割器，
// 它除了比ListView.builder多了一个separatorBuilder参数，该参数是一个分割器生成器
class ListViewSeparatedRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ListViewSeparatedRouteState();
}

class _ListViewSeparatedRouteState extends State<ListViewSeparatedRoute> {
  @override
  Widget build(BuildContext context) {
    //下划线预制
    Widget divider1 = Divider(
      color: Colors.blue,
    );
    Widget divider2 = Divider(
      color: Colors.green,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('ListView.separated'),
      ),
      body: ListView.separated(
        itemCount: 100,
        //列表构造器
        itemBuilder: (BuildContext, int index) {
          return ListTile(
            title: Text('$index'),
          );
        },
        //分割器构造器
        separatorBuilder: (BuildContext context, int index) {
          return index % 2 == 0 ? divider1 : divider2;
        },
      ),
    );
  }
}

//实例：无限加载列表
//假设我们要从数据源异步分批拉取一些数据，然后用ListView显示，
// 当我们滑动到列表末尾时，判断是否需要再去拉取数据，如果是，则去拉取，拉取过程中在表尾显示一个loading，拉取成功后将数据插入列表；
// 如果不需要再去拉取，则在表尾提示"没有更多"
class InfiniteListView extends StatefulWidget {
  @override
  _InfiniteListViewState createState() => new _InfiniteListViewState();
}

class _InfiniteListViewState extends State<InfiniteListView> {
  static const loadingTag = "##loading##"; //表尾标记
  var _words = <String>[loadingTag];

  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      _words.insertAll(
          _words.length - 1,
          //每次生成20个单词
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      setState(() {
        //重新构建列表
      });
    });
  }

  @override
  void initState() {
    _retrieveData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('列表加载'),
      ),
      body: ListView.separated(
        itemCount: _words.length,
        itemBuilder: (context, index) {
          //如果到了表尾
          if (_words[index] == loadingTag) {
            //不足百条
            if (_words.length - 1 <= 100) {
              //获取数据
              _retrieveData();
              //加载时显示loading
              return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(
                    strokeWidth: 2.0,
                  ),
                ),
              );
            } else {
              //已经加载100条数据，不再获取
              return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text(
                  '没有更多了',
                  style: TextStyle(color: Colors.grey),
                ),
              );
            }
          }
          //显示单词列表项
          return ListTile(
            title: Text(_words[index]),
          );
        },
        separatorBuilder: (context, index) => Divider(
              height: .0,
              color: Colors.blue,
            ),
      ),
    );
  }
}
